import React, { useState } from 'react';
import { CaretLeftOutlined } from '@ant-design/icons';
import VariableSetting from './VariableSetting';
import './LeftMenu.scss';

const menuItems = [
  {
    key: 'variable',
    icon: '[x]',
    name: '变量',
  },
];

const LeftMenu = () => {
  const [activeItem, setActiveItem] = useState('');

  const switchItem = (key) => {
    if (activeItem === key) {
      setActiveItem('');
      return;
    }
    setActiveItem(key);
  };

  return (
    <div className="flow-design-left-menu">
      <div className={`left-menu-panel ${activeItem ? 'active' : ''}`}>
        {activeItem === 'variable' && <VariableSetting />}
        {activeItem && (
          <div className="left-menu-close" onClick={() => switchItem('')}>
            <CaretLeftOutlined />
          </div>
        )}
      </div>
      <div className="left-menu">
        <div className="left-menu-list">
          {menuItems.map((item) => (
            <div
              key={item.key}
              className={`left-menu-item ${activeItem === item.key ? 'active' : ''}`}
              onClick={() => switchItem(item.key)}
            >
              <div className="left-menu-icon">
                {typeof item.icon === 'string' ? item.icon : <item.icon />}
              </div>
              <div className="left-menu-name">{item.name}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default LeftMenu; 